<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { CountUp } from 'countup.js'

import type { CountUpOptions } from 'countup.js'

const options: CountUpOptions = {
  suffix: '%',
  duration: 2
}
const props = defineProps({
  progress: {
    type: Number,
    default: () => 80
  },
  color: {
    type: String,
    required: true
  }
})

const valueRef = ref<null | HTMLElement>(null)

const width = computed(() => {
  return props.progress + '%'
})
const bgColor = computed(() => {
  return props.color
})
const radius = computed(() => {
  return props.progress === 100 ? '2px' : 'none'
})
onMounted(() => {
  if (valueRef.value) {
    new CountUp(valueRef.value, props.progress, options).start()
  }
})
</script>

<template>
  <div class="progress-component-box">
    <div class="progress-bar-container">
      <div class="progress-container animation"></div>
    </div>
    <span class="width-value number" ref="valueRef" />
  </div>
</template>

<style scoped lang="scss">
.progress-component-box {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  .progress-bar-container {
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: #fff;
    position: relative;
    font-size: 0;

    .progress-container {
      font-size: 0;
      position: relative;
      left: 0;
      top: 0;
      height: 100%;
      background-color: v-bind(bgColor);
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;

      border-top-right-radius: v-bind(radius);
      border-bottom-right-radius: v-bind(radius);
      &.animation {
        animation: addWidth 2s linear forwards;
      }
    }
  }
  .width-value {
    font-size: 14px;
  }

  @keyframes addWidth {
    0% {
      width: 0%;
    }
    100% {
      width: v-bind(width);
    }
  }
}
</style>
